<template>
  <div class="cb-tab-btn xui-fc" :class="{active:isActive}" @click="choose" ref="tabBtn">
    <span class="left"></span>
    <div class="center">
      <slot></slot>
    </div>
    <span class="right"></span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // isActive: false
    };
  },
  props: {
    name: String,
    isActive: Boolean
  },
  methods: {
    choose() {
      this.$emit(
        "chooseTab",
        this.name,
        this.$refs.tabBtn.offsetLeft,
        this.$refs.tabBtn.offsetWidth
      );
    }
  }
};
</script>


<style lang="less" scoped>
.cb-tab-btn {
  display: inline-block;
  position: relative;
  height: 38px;
  line-height: 36px;
  color: #4d4d4d;
  font-size: 16px;
  cursor: pointer;

  span {
    display: inline-block;
    width: 15px;
  }
  span.left {
    position: absolute;
    left: 0;
    top: 0;
    height: 38px;
    background: url("./cb-tab-btn-left.png") no-repeat left center;
  }
  span.right {
    position: absolute;
    right: 0;
    top: 0;
    height: 38px;
    background: url("./cb-tab-btn-right.png") no-repeat left center;
  }
  .center {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    border-top: 1px solid #e8d2a0;
    border-bottom: 1px solid #e8d2a0;
    box-sizing: border-box;
    height: 38px;
    line-height: 36px;
  }
}
.cb-tab-btn.active {
  color: #fff;
  background: #b59551;
}
</style>

